---
title: 체크마크
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

성공하거나 완료된 작업을 나타냅니다.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};
```

</Tab>

<Tab title="Props">

`React.ComponentPropsWithoutRef<'div'>` 를 확장하며 일반 `div` 요소의 모든 속성을 수용합니다.

</Tab>

</Tabs>

## 애니메이션 체크마크

애니메이션 기능이 추가된 체크마크 아이콘을 나타냅니다.

<Tabs>

<Tab title="Usage">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Props">

| 프로퍼티        | 유형  | 설명                                         | 기본값                  |
| ----------- | --- | ------------------------------------------ | -------------------- |
| isAnimating | 부울  | 체크마크가 애니메이션 중인지 여부를 제어합니다. | 거짓                   |
| 색상          | 문자열 | 체크마크의 색상                                   |                      |
| 지속 시간       | 숫자  | 애니메이션의 지속 시간(초)         | 0.5초 |
| 크기          | 숫자  | 체크마크의 크기                                   | 28 픽셀                |

</Tab>

</Tabs>
